import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo,
    currentGroup: state.group.currentGroup
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: msg => dispatch(global.allActions.groupActions.openModal(msg))
  }
}

class List extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      inviteId: '',
      playerData: undefined
    }
  }
  
  public componentDidMount() {

  }

  inviteIdChange(e) {
    this.setState({inviteId: _.trim(e.target.value)})
  }

  query() {
    const url = `${config.pre}/crowd/relation/${Cookies.get('areaCode')}/select`
    const opt = { method: 'GET' }
    const query = {
      lftid: this.state.inviteId,
      crowdId: this.props.currentGroup.id
    }
    fetchJson(url, opt, query).then(data => {
      console.log(data)
      if (data.result) {
        this.props.openModal(data.message)
        return
      }
      this.setState({playerData: data.data})
    })
  }

  invite() {
    const url = `${config.pre}/crowd/relation/${Cookies.get('areaCode')}/user`
    const body = {
      uid: this.state.playerData.uid,
      crowdId: this.props.currentGroup.id
    }
    const opt = { method: 'POST', body: JSON.stringify(body) }
    fetchJson(url, opt).then(data => {
      this.props.openModal(data.message)
      this.query()
    })
  }

  public render() {
    const {inviteId} = this.props
    const {playerData} = this.state
    return <div className="view-page group-view">
      <div className="pure-g inner-header v-center invite-header">
        <input placeholder="请输入昵称或ID" className="player-query" type="text" value={inviteId} onChange={this.inviteIdChange.bind(this)}/>
        <img onClick={this.query.bind(this)} className="player-query-btn" src="img/groupNew/search-btn.png?v=20181201" alt=""/>
      </div>
      <div className="inner-body">
        {
          playerData ? <div className="group-item pure-g member-list-item">
            <div className="pure-u-5-24 vh-center">
              <img className="group-new-header" src={playerData.headUrl} alt="群头像" />
            </div>
            <div className="pure-u-13-24 h-center column">
              <p className="group-name orange">{playerData.nickname}</p>
              <p className="group-number">ID: {playerData.lftid}</p>
            </div>
            <div className="pure-u-6-24 vh-center">
              {
                playerData.status ? <span>已经是成员</span> : <img onClick={this.invite.bind(this)} className="full-width mrr-3" src="img/groupNew/invite-join-btn.png?v=20181201" alt=""/>
              }                      
            </div>
          </div> : null
        }
      </div>
      <div className="inner-bottom">
        <div className="text vh-center"><span>邀请玩家</span></div>
        <NavLink to="/MemberList"><img className="back" src="img/app/back.png?v=20181201" alt="" /></NavLink>
      </div>
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(List)